<template>
  <div class='patientList'>
    <header>
      <div class="div" @click="back">
        <img src="../../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>人员列表</span>
      </div>
      <div class="div">
        <span></span>
      </div>
    </header>
    <!-- 搜索 -->
    <div class='patientSearch'>
      <van-search
        style='width: 100%'
        v-model="patientSearch"
        placeholder="请输入姓名"
        @input="onSearch"
        @search="onSearch">
      </van-search>
    </div>
    <div class='searchRadio'>
      <div :class='{"act":select===1}' @click='select=1;onSearch()'>我的<p></p></div>
      <p></p>
      <div :class='{"act":select===2}' @click='select=2;onSearch()'>全部<p></p></div>
    </div>
    <!-- 列表 -->
    <div class='list'>
      <div class='title' v-if='false'>老人列表</div>
      <div class='item' v-if='list.length!==0' v-for='(item,ind) in list' :key='ind' @click='goImplement(item)'>
        <div class='user' :style='{backgroundColor:item.sex===1?"#CDEFFF":"#FFE3F7"}'>
          <div class='sex' :class='{"nan":item.sex===1,"nv":item.sex===2}'></div>
          <div class='name'>{{item.user_name}}&nbsp;&nbsp;{{item.age?`${item.age}岁`:'未知年龄'}}</div>
        </div>
        <div class='info'>
          <div class='room_no'>房间号：{{item.room_no?item.room_no:'无'}}</div>
          <div class='bed_no'>床号：{{item.bed_no?item.bed_no:'无'}}</div>
          <div class='address'>地址：{{item.location}}</div>
          <div class='phone' v-if='false'>手机号：{{item.phone}}</div>
        </div>
      </div>
      <van-empty
        style="width: 100%;height: 60%"
        v-show="list.length===0"
        class="custom-image"
        :image="require('../../../assets/空两本书.png')"
        description="暂无数据"
      />
<!--      <div class='none' v-if='list.length===0'>暂无数据</div>-->
    </div>

    <div class="loading" v-if="loadingThis">
      <van-loading  size="24px" type="spinner" color="#1989fa"></van-loading>
    </div>
  </div>
</template>

<script>
export default {
  name: 'patientList',
  data () {
    return {
      user_id: this.$route.query.userid,
      team_id: this.$route.query.team_id,
      patientSearch: '', // 搜索
      page: 1,
      size: 10,
      select: 1, // 1我的/2全部
      loadingThis: false,
      list: [
        // {
        //   user_name: '这是一个姓名这是一个姓名这是一个姓名',
        //   sex: 1,
        //   age: 18,
        //   location: '省市区',
        //   locationdetail: '详细地址',
        //   phone: 17766233001
        // }
      ] // 患者列表
    }
  },
  mounted () {
    // console.log(this.$route.query)
    this.query()
  },
  methods: {
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 搜索事件
    onSearch () {
      console.log(this.patientSearch)
      this.page = 1
      this.query()
    },
    // 点击患者事件
    goImplement (item) {
      let obj = {
        team_id: this.team_id,
        patientId: item.user_id,
        doc_user_id: this.user_id
      }
      this.$router.push({path: '/implementList', query: obj})
    },
    // 查询
    query () {
      let data = {
        showtype: this.select,
        doc_user_id: this.user_id,
        team_id: this.team_id,
        patient_name: this.patientSearch,
        hasBed: '1'
      }
      this.loadingThis = true
      this.$http.getPost('/miniTeamTodayWork/findPatients', data).then((res) => {
        this.loadingThis = false
        if (res.data.status === 'success') {
          this.list = res.data.data
        }
      }).catch(() => {
        this.loadingThis = false
        this.$toast('您的网络有些拥挤，请稍后再试')
      })
    }
  }
}
</script>

<style scoped lang='scss'>

.patientList{
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #f5f5f5;
  font-size: 15px;

  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
    background: white;
    position: sticky;
    top: 0;
    z-index: 9;
  }
  .div{
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    font-family: "PingFang SC";
    font-size: 15px;
    font-weight: bold;
  }
  .div img{
    margin-right: 5px;
  }
  .div:nth-child(1) img{
    height: 13px;
    width: 7px;
    margin-left: 15px;
  }
  .div:nth-child(3) img{
    margin-right: 5px;
    width: 13px;
    height: 13px;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .div:nth-child(2){
    justify-content: center;
  }
  .div:nth-child(3){
    justify-content: flex-end;
  }
  .solid{
    color: #1DA4F2;
  }

  .patientSearch{
    width: 100%;
    background-color: white;
    overflow: hidden;

    .van-search__content{
      border-radius: 27px;
    }
  }
  .searchRadio{
    width: 100%;
    height: 44px;
    overflow: hidden;
    background-color: white;
    position: relative;
    &>p{
      width: 1px;
      height: 15px;
      background-color: #dfdfdf;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }

    &>div{
      width: 50%;
      float: left;
      font-size: 15px;
      color: #333333;
      line-height: 44px;
      text-align: center;
      position: relative;
      &>p{
        display: none;
        width: 40px;
        height: 2px;
        border-radius: 1px;
        background-color: #1DA4F2;
        position: absolute;
        left: 50%;
        bottom: 5px;
        transform: translateX(-50%);
      }

      &.act{
        color: #1DA4F2;
        &>p{
          display: block;
        }
      }
    }
  }

  .list{
    width: 100%;
    //height: calc(100% - 59px);
    padding-top: 5px;
    overflow: hidden;

    .title{
      font-size: 15px;
      font-weight: bold;
      color: #333333;
      padding: 10px 20px;
      background-color: #FAF9FE;
      margin-bottom: 2vw;
    }

    .item{
      width: 47vw;
      float: left;
      background-color: white;
      border-radius: 5px;
      overflow: hidden;
      &:nth-child(2n-1){
        margin: 0 2vw 2vw;
      }

      .user{
        width: calc(100% - 2vw);
        padding: 1vw 1vw;
        overflow: hidden;
        display: flex;
        align-items: center;

        .sex{
          float: left;
          width: 8.5vw;
          height: 8vw;
          align-items: center;
          border-radius: 50%;
          background-size: cover;
          background-position: center;
          &.nan{
            background-image: url("../../../assets/zhiyuan/nan@2x.png");
          }
          &.nv{
            background-image: url("../../../assets/zhiyuan/nv@2x.png");
          }
        }

        .name{
          width: calc(100% - 7vw);
          float: left;
          font-size: 15px;
          color: #333333;
          margin-left: 2vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .info{
        width: calc(100% - 6vw);
        padding: 2vw 3vw;

        &>div{
          font-size: 15px;
          color: #333333;
          line-height: 25px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

        }

      }
    }

    .none{
      font-size: 15px;
      color: #999999;
      text-align: center;
      margin-top: 5vw;
    }
  }

  .loading {
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}
</style>
